<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: rgb(204, 212, 230);
        display: flex;
        justify-content: center;
    }
    .container{
        position: relative;
        width: 700px;
        height: 400px;
        border: 10px solid #fff;
        background-color: rgb(120, 140, 200);
        top: 120px;
        border-radius: 20px;
        overflow: hidden;
    }
    .container .txt{
        position: absolute;
        width: 200px;
        height: 300px;
        left: 0;
        margin: 75px 50px;
        transition: 1s;
    }
    .txt a{
        color: #fff;
        /* font属性中fontsize与fontfamily是必填的即下方的第二个与第三个参数 */
        font: 900 28px  '';
        /* 去除a的默认样式 */
        text-decoration: none;
    }
    .txt h2{
        transition: .5s 1s;
        opacity: 0;
        color: rgb(30, 210, 200);
    }
    .txt span{
        transition: .5s 1s;
        color: #fff;
        font: 500 15px '';
        position: absolute;
        top: 70px;
    }
    .container .line-area{
        position: absolute;
        /* right: -10px;
        top: -10px; */
        top: -130px;
        right: -240px;
    }
    .line-area .line,.line-other{
        position: absolute;
        right: calc(var(--i)*100px);
        width: calc(var(--w)*40px);
        height: 500px;
        /* overflow: hidden; */
        background-color: rgb(240, 220, 150);
        transform: rotateZ(220deg) translate(0,0);
        border-radius: 100px;
        transition: .5s .5s;
    }
    .line:nth-child(2){
        background-color: rgb(240, 190, 230);
    }
    .line-area .line-other{
        left: -470px;
        top: -140px;
        
        /* right: 400px; */
        /* left: -150px; */
        width: 70px;
        background-color: rgb(90, 220, 150);
    }
    .container:hover .line-area div{
        transition: .5s calc(var(--i)*.1s);
        transform: rotateZ(220deg) translate(-200px,400px);
    }
    .container:hover .txt{
        transition: 1s .5s;
        left: 370px;
    }
    .container:hover .txt span{
        transition: 1s .5s;
        top: 105px;
    }
    .container:hover .txt h2{
        transition: 1s .5s;
        opacity: 1;
    }
    .container .quickmark{
        width: 250px;
        height: 250px;
        position: absolute;
        background-image: url(./images/张伟3.jpg);
        background-size: cover;
        background-position: -155px 0;
        background-repeat: no-repeat;
        margin: 70px;
        opacity: 0;
        transition: .5s;
    }
    .container:hover .quickmark{
        transition: 1s 1.3s;
        opacity: 1;
    }
</style>
<body>
    <div class="container">
        <!-- 左边是文字区域 -->
        <div class="txt">
            <a href="#">ZS</a>
            <h2>zs_studying</h2>
            <span>好好学习,天天向上!</span>
        </div>
        <!-- 右边是线条区域 -->
        <div class="line-area">
            <div class="line" style="--i:1;--w:1.5"></div>
            <div class="line" style="--i:2;--w:1.6"></div>
            <div class="line" style="--i:3;--w:1.7"></div>
            <div class="line" style="--i:4;--w:1.4"></div>
            <div class="line-other" style="--i:5"></div>
        </div>
        <!-- 二维码区域 -->
        <div class="quickmark"></div>
    </div>
</body>
</html>